<template>
	<gui-page 
	ref="guiPage" 
	:customHeader="true"
	:fullPage="true"
	:customFooter="true">
		<!-- 页面主体 -->
		<template v-slot:gBody>
			
				<home></home>
			
		</template>
		<!-- 自定义底部导航 -->
		<template v-slot:gFooter>
			
					
			
			<view 
			
			style="padding-top:50rpx;" 
			class="gui-relative">
				<gui-flex 
				:customClass="['gui-footer']" 
				direction="row" 
				:wrap="false" 
				alignItems="center" :justifyContent="center==null?'space-around':''">
					<view v-for="(item,index) in tabs"
					class="gui-footer-icon-buttons" 
					@tap="navChange(index)">
					
						<text 
						:class="[
							currentIndex == index ? 'gui-primary-color' : 'gui-color-gray', 
							'', 
							'gui-footer-icon-buttons-icon', 
							'gui-block'
						]">
						<image v-if="item!=null" :src="item.iconPic" mode="heightFix" style="height: 25px;"></image>
						</text>
						<text v-if="item!=null"
						:class="[
							currentIndex == index ? 'gui-primary-color' : 'gui-color-gray', 
							'gui-icons', 
							'gui-footer-icon-buttons-text', 
							'gui-block'
						]">{{item.iconText}}</text>
					</view>
					
				</gui-flex>
				<!-- 使用定位方式实现凸出按钮 -->
				<view v-if="center!=null"
				class="gui-footer-buttons-ab" 
				@tap="navChange(2)">
					<text 
					:class="[
						currentIndex == 2 ? 'gui-primary-color' : 'gui-color-gray', 
						'gui-footer', 
						'gui-icons', 
						'gui-footer-buttons-ab-icon', 
						'gui-block',
						'gui-dark-bg-level-2'
					]">
					<image v-if="center!=null" :src="center.iconPic" mode="heightFix" style="height: 25px;"></image>
					</text>
					<text 
					:class="[
						currentIndex == 2 ? 'gui-primary-color' : 'gui-color-gray', 
						'gui-icons', 
						'gui-footer-icon-buttons-text', 
						'gui-block'
					]">{{center.iconText}}</text>
				</view>
			</view>
			
			
			
		</template>
	</gui-page>
</template>
<script>
	import home from "./home.vue"
export default {
	components:{
		home	
	},
	data() {
		return {
			currentIndex : 0,
			showIndex    : 1,
			tabs:[],
			center:null
		}
	},
	beforeCreate() {
		
	},
	created() {
		let d=uni.getStorageSync("tabsConfig");
		console.log("tabs->d",d);
		this.tabs=[
			d.component[0].setStyle.iconList[0],
			d.component[0].setStyle.iconList[1],			
			d.component[0].setStyle.iconList[2],
			d.component[0].setStyle.iconList[3],
		];
		// this.center=d.component[0].setStyle.iconList[2],
		// console.log(this.tabs);
		this.$refs.guiPage.resetFooterHeight();
	},
	methods: {
		
		navChange : function(index){
			this.currentIndex = index;
		},
		showChange : function(idx){
			this.showIndex = idx;
			// 切换时候重新计算一下自定义的底部高度
			// 实际开发过程中底部导航是固定模式的不需要重新计算
			
		}
	}
}
</script>
<style scoped>

</style>